<template>
  <div>
    <Category :scene="scene"></Category>
    <el-card shadow="always" style="margin: 10px 0px">
      <div v-show="scene == 0">
        <el-button
          :disabled="!categortStore.c3Id"
          type="primary"
          size="default"
          :icon="Plus"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table
          border
          stripe
          style="margin: 10px 0px"
          :data="spuList.records"
          @sort-change="sortChange"
          ><el-table-column
            type="index"
            align="center"
            width="80px"
            label="序号"
          ></el-table-column>
          <el-table-column
            align="center"
            label="SPU名称"
            prop="spuName"
            sortable
            show-overflow-tooltip
            resizable
          ></el-table-column>
          <el-table-column
            align="center"
            label="SPU描述"
            prop="description"
            show-overflow-tooltip
            resizable
          ></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row, $index }">
              <el-button
                type="primary"
                size="small"
                title="添加SKU"
                :icon="Plus"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                title="修改SPU"
                :icon="Edit"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                title="查看SKU"
                :icon="InfoFilled"
                @click="showDialog(row)"
              ></el-button>
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="yellowgreen"
                :title="`确定要删除${row.spuName}`"
                width="300px"
                @confirm="confirm(row)"
                ><template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    title="删除SPU"
                    :icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[3, 5, 7]"
          v-model:page-size="pageSize"
          layout=" prev, pager, next, jumper,->,sizes,total"
          prev-text="上一页"
          next-text="下一页"
          :total="spuList.total"
          background
          @current-change="getSpuList"
          @size-change="sizeHandler"
          :pager-count="7"
        ></el-pagination>
      </div>
      <Spu
        v-show="scene == 1"
        @changeScene="changeSceneHandler"
        ref="spuRef"
      ></Spu>
      <Sku
        v-show="scene == 2"
        ref="skuRef"
        @changeScene="changeSceneHandler"
      ></Sku>

      <el-dialog v-model="dialogTableVisible" title="查看SKU列表">
        <el-table :data="skuList">
          <el-table-column prop="skuName" label="名称" width="150" />
          <el-table-column property="price" label="价格" width="200" />
          <el-table-column property="weight" label="重量" />
          <el-table-column label="默认图片">
            <template #="{ row, $index }">
              <img
                :src="row.skuDefaultImg"
                alt=""
                style="width: 100px; height: 100px"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reqFindSkuList } from "../../../api/product/spu/spu";
import { ref, watch, reactive ,onUnmounted} from "vue";
//引入element-plus提供icon图标组件
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  InfoFilled,
} from "@element-plus/icons-vue";
import useCategoryStore from "../../../stores/category";

import { reqSpuList, reqDeleteSpu } from "../../../api/product/spu/spu";

let categortStore = useCategoryStore();

//引入两个子组件
import Spu from "./addOrUpdateSpu.vue";
import Sku from "./addSku.vue";
import { ElMessage } from "element-plus";

//创建场景
let scene = ref<number>(0);
//当前页码
let currentPage = ref<number>(1);
//几条数据
let pageSize = ref<number>(3);

let spuRef = ref<any>();

let spuList = ref({});

let skuRef = ref<any>();

let skuList = ref([]);

let dialogTableVisible = ref<boolean>(false);
//监听仓库ID变化
watch(
  () => categortStore.c3Id,
  () => {
    if (categortStore.c3Id == "") return;
    getSpuList();
  }
);
const getSpuList = async (pager: number = 1) => {
  currentPage.value = pager;
  let result = await reqSpuList(
    currentPage.value,
    pageSize.value,
    categortStore.c3Id
  );
  spuList.value = result;
};

const sortChange = ({ column, prop, order }) => {};

const sizeHandler = (limit: number) => {
  pageSize.value = limit;
  getSpuList();
};
//添加SPU按钮
const addSpu = () => {
  scene.value = 1;
  spuRef.value.initAddSpu(categortStore.c3Id);
};
//更新SPU按钮
const updateSpu = (hasSpu) => {
  scene.value = 1;
  spuRef.value.initHasSpuData(hasSpu);
};

const changeSceneHandler = ({ scenes, flag }) => {
  scene.value = scenes;
  if (flag == "add") {
    getSpuList();
  } else if (flag == "update") {
    getSpuList(currentPage.value);
  }
};

//添加sku按钮
const addSku = (spu) => {
scene.value = 2;
skuRef.value.initSku(categortStore.c1Id, categortStore.c2Id, spu);
};

const showDialog = async (spu) => {
dialogTableVisible.value = true;
let skus = await reqFindSkuList(spu.id);
skuList.value = skus;
};

const confirm = async (spu) => {
  try {
    await reqDeleteSpu(spu.id);
    ElMessage({
      type: "success",
      message: `删除${spu.spuName}成功`,
    });
    getSpuList();
  } catch (error) {
    ElMessage({
      type: "error",
      message: `删除${spu.spuName}失败`,
    });
  }
};

onUnmounted(() => {
  categortStore.c1Id = "";
  categortStore.c2Id = "";
  categortStore.c3Id = "";
  categortStore.c1List = [];
  categortStore.c2List = [];
  categortStore.c3List = [];
});
</script>

<style scoped>
</style>